// A4 纸张尺寸
$a4-width: 210mm;
$a4-height: 297mm;

// 布局变量
$left-width: 30%;
$right-width: 70%;
$container-padding: 20px;
$section-margin: 15px;

// 主容器布局
.main-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding: $container-padding;
  background-color: #f5f5f5;
}

// 左侧编辑区域
.left-panel {
  width: $left-width;
  padding-right: 15px;
  overflow-y: auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px;

  .section {
    margin-bottom: $section-margin;
    padding: 15px;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }
  }
}

// 右侧预览区域
.right-panel {
  width: $right-width;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  // A4 预览容器
  .template-container {
    width: $a4-width;
    height: $a4-height;
    margin: 20px auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    
    // 打印时移除阴影
    @media print {
      box-shadow: none;
    }
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .main-container {
    flex-direction: column;
  }

  .left-panel,
  .right-panel {
    width: 100%;
    margin-right: 0;
  }

  .left-panel {
    margin-bottom: 20px;
  }
}

// 编辑区域的表单样式
.edit-form {
  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
  }

  input, textarea, select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    
    &:focus {
      outline: none;
      border-color: #409EFF;
    }
  }

  .btn {
    padding: 8px 15px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    &:hover {
      background-color: #66b1ff;
    }
  }
}

// 打印样式优化
@media print {
  .main-container {
    padding: 0;
    background-color: white;
  }

  .left-panel {
    display: none;
  }

  .right-panel {
    width: 100%;
    box-shadow: none;
  }

  .template-container {
    margin: 0;
    box-shadow: none;
  }
}
